<template>
  <div>
    <div id="currenAdd"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
import "../utils/china";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    getOption() {
      return {
        title: {
          text: "2021年中国疫情分布图",

          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["肺炎感染者"],
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            { min: 1000 },
            { min: 100, max: 999 },
            { min: 10, max: 99 },
            { min: 1, max: 9 },
            { max: 1 },
            // {value: 123, label: '123（自定义特殊颜色）', color: 'grey'},
          ],
          color: ["#E0022B", " rgb(230, 114, 114)", "rgb(197, 173, 172)"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          left: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: "肺炎感染者",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)",
            },
            data: [
              { name: "北京", value: 50 },
              { name: "天津", value: 30 },
              { name: "上海", value: 10 },
              { name: "重庆", value: 8 },
              { name: "河北", value: 150 },
              { name: "河南", value: 10 },
              { name: "云南", value: 0 },
              { name: "辽宁", value: 80 },
              { name: "黑龙江", value: 9 },
              { name: "湖南", value: 2 },
              { name: "安徽", value: 0 },
              { name: "山东", value: 28 },
              { name: "新疆", value: 0 },
              { name: "江苏", value: 2 },
              { name: "浙江", value: 1 },
              { name: "江西", value: 0 },
              { name: "湖北", value: 10 },
              { name: "广西", value: 0 },
              { name: "甘肃", value: 8 },
              { name: "山西", value: 112 },
              { name: "内蒙古", value: 0 },
              { name: "陕西", value: 1 },
              { name: "吉林", value: 11 },
              { name: "福建", value: 2 },
              { name: "贵州", value: 0 },
              { name: "广东", value: 10 },
              { name: "青海", value: 0 },
              { name: "西藏", value: 0 },
              { name: "四川", value: 6 },
              { name: "宁夏", value: 0 },
              { name: "海南", value: 4 },
              { name: "台湾", value: 1300 },
              { name: "香港", value: 200 },
              { name: "澳门", value: 98 },
            ],
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("currenAdd"));
      let option = this.getOption();
      chart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.toDraw();
  },
};
</script>
<style scoped>
#currenAdd {
  height: 560px;
}
</style>